// 表单组件 ts 需要承担什么职责
// input onchange 父组件 props

// 1. 约束父组件的传参 props:interface
2. 
// 3. onchange ts 事件类型约束 ReactDOM onchange
import React, { useState } from 'react';
import {Input} from 'antd';

interface Props{
    placeholder:string;
    onSetQuery:(value:string)=>void
}

const TodoInput:React.FC<Props>=({placeholder,onSetQuery})=>{

    // 表单的value数据绑定
    const [value,setValue]=useState('')

    const onAdd=()=>onSetQuery(value)

    return (
        <section className="input-wrap">
            <Input
            value={value}
            onChange={e=>setValue(e.target.value)}
            onPressEnter={onAdd}
            className='input'
            placeholder={placeholder}
            />
        </section>
    )
}

export default TodoInput;